<template>
  <div>
    <div class="header__top">
      <div class="header__wrap">
        <span>
          尚品汇欢迎您！
          <span v-if="$store.state.user.nickName">
            {{ $store.state.user.nickName }}
            <span @click="logout">退出登录</span>
          </span>
          <span v-else>
            请
            <router-link to="/login">登录</router-link> |
            <router-link to="/register">免费注册</router-link>
          </span>
        </span>

        <div>
          <router-link class="header__top-nav-item" to="/center">
            我的订单
          </router-link>
          <router-link class="header__top-nav-item" to="/shopcart">
            我的购物车
          </router-link>
          <span class="header__top-nav-item">我的尚品汇</span>
          <span class="header__top-nav-item">尚品汇会员</span>
          <span class="header__top-nav-item">企业采购</span>
          <span class="header__top-nav-item">关注尚品汇</span>
          <span class="header__top-nav-item">合作招商</span>
          <span class="header__top-nav-item">商家后台</span>
        </div>
      </div>
    </div>
    <div class="header__bottom">
      <div class="header__wrap">
        <!-- 所有public目录下的资源，通过/直接访问 -->
        <router-link to="/home">
          <img src="/images/logo.png" alt="logo" />
        </router-link>
        <!-- 
          路由跳转两种方式：
            1. 声明式导航
              router-link

            2. 编程式导航
              this.$router.push/replace()

            默认都会使用声明式导航（简单）
            如果在路由跳转之前，要做一些其他的事（发送请求），必须用编程式导航
         -->
        <!-- <form class="header__bottom-form">
          <input type="text" class="header__bottom-input" />
          <button class="header__bottom-btn" @click.prevent="toSearch">
            搜索
          </button>
        </form> -->

        <form class="header__bottom-form" @submit.prevent="toSearch">
          <input type="text" class="header__bottom-input" v-model="keyword" />
          <button class="header__bottom-btn">搜索</button>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "SHeader",
  data() {
    return {
      keyword: "",
    };
  },
  methods: {
    toSearch() {
      const query = {
        // 读取当前的query参数，如果有query参数，携带上，，没有就不携带
        ...this.$route.query,
        keyword: this.keyword,
      };

      if (!this.keyword) {
        // 删除对象的属性
        delete query.keyword;
      }

      // console.log(this.$router);
      // this.$router.push("/search");
      // 使用编程式导航重复跳转到一个地址，就会报错：NavigationDuplicated: Avoided redundant navigation to current location: "/search?keyword=".
      // 声明式导航没有这个错误。
      this.$router.history.push({
        // 一旦对象形式，都用命名路由形式
        // 如果是path携带params参数，跳转失败
        // 只有name携带params参数，跳转成功
        name: "Search",
        query,
      });
    },
    async logout() {
      await this.$store.dispatch("user/logout");
      // 刷新页面
      window.location.reload();
    },
  },
};
</script>

<style lang="less" scoped>
// 嵌套写样式缺点：1. 打包体积大 2. 难以维护
// .header{
//   .header__top {

//   }
// }

.header__top {
  padding: 8px 0;
  background-color: #eaeaea;
  display: flex;
  justify-content: center;
  height: 20px;
}

.header__wrap {
  min-width: 1200px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header__top-nav-item {
  border-right: 1px solid #000;
  padding-right: 10px;
  margin-right: 10px;
  &:last-child {
    border-right: none;
    padding-right: 0;
    margin-right: 0;
  }
}
// .header__top-nav-item:last-child{}

.header__bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90px;
}

.header__bottom-form {
  display: flex;
  align-items: center;
}
.header__bottom-input {
  width: 450px;
  height: 25px;
  border: 2px solid red;
  outline: none;
  padding-left: 10px;
}

.header__bottom-btn {
  height: 29px;
  width: 80px;
  border: none;
  background-color: red;
  color: #fff;
}
</style>
